<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="jquery-1.11.1.min.js"></script>
    <script>
        $(function(){
            $("#btnAddHTML").click(function(){
                //如果指定元素原先里面有内容，会把原先的内容清除掉，然后添加新的内容
                // $("div").html("这是HTML内容");

                //如果html()里面是一个html结构的，则会创建这个元素
              //  $("div").html('<a href="#">这是一个超链接</a>');

                $("div")[0].innerHTML = '<a href="#">这是一个超链接</a>';
            })

            //获取div的内容
            $("#btnGetHTML").click(function(){
                //html()不带参数，代表获取内容
                var html =  $("div").html();
               // alert(html);
            })

            //先获取原先指定元素中的内容，然后再设置，则不会先清除原先指定元素中的内容
            $("#btnHTML").click(function(){
                var html =  $("div").html();
                $("div").html(html + '<a href="#">这是一个超链接</a>');
            })
        })
    </script>
</head>
<body>
 <input type="button" value="设置HTML内容" id="btnAddHTML">
 <input type="button" value="获取HTML内容" id="btnGetHTML">
 <input type="button" value="HTML模拟append内容" id="btnHTML">
<div>
    这是一段文字
</div>
</body>
</html>